{extend name="public/base"}

{block name="title"}
摩邦主页
{/block}

{block name="style"}
<link rel="stylesheet" href="/static/wechat/css/homepage.css" />
<style type="text/css">
    .weui-cell__bd {
        line-height: 1;
        margin-left: .8rem;
    }
    .Fixed_div{background-image:url(/static/wechat/images/b3.png);}
    .Messp { position: fixed;}
    .Messp>p{display: inline-block;width: 14rem;height: 1.2rem;font-size: 0.7rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis}
    .weui-cell__hd img {width:3rem;height:3rem;border-radius:50%;}
</style>
{/block}


{block name="body"}
<div class="homepage_nav">
    <!--<a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>-->
    <i class="heade_por">

    </i>
    <h1 class="home_page_title">摩邦</h1>
    <a class="to_messages" href="{:url('w_message/index', ['type' => 0])}">
        <!--<i class="message"></i>-->
    </a>

</div>
<!--悬浮窗口-->
<a class="Fixed_div" href="{:url('index')}"></a>
<!--店铺列表-->
<div class="weui-cells" style="padding-bottom: 0rem;" id="s_list_box">
    <!--<div class="weui-cell">-->
        <!--<div class="weui-cell__hd"><img src="/static/wechat/images/message_showimg02.png"/></div>-->
        <!--<div class="weui-cell__bd">-->
            <!--<p>老司机维修店</p>-->
            <!--<div class="Lsit_div"><i></i><i></i><i></i><i></i><i></i></div>-->
            <!--<span>145人已消费</span>-->
        <!--</div>-->
        <!--<div class="weui-cell__ft">距你约284m</div>-->
    <!--</div>-->


</div>
<!--没有跟多-->
<span class="no_more" style="display:block;height:6rem;"></span>

<!--底部消息提示-->
<div class="Messp">
    <i class="icon_1"></i>
    <p>当前位置:<span>(加载中...)</span></p>
    <i class="icon_2"></i>
</div>


<div id="container" tabindex="0" style="display:none"></div>
<!--weui-->
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中...</p>
    </div>
</div>
<div id="iosDialog2" class="js_dialog" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:$('#iosDialog2').hide();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
{/block}


{block name="javascript"}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=9a8d0d7e358d9d80f7f61a1989ba35a0"></script>
<script type="text/javascript">
//改写原生的对话框
function sAlert(s){
    $('#iosDialog2').show();
    $('#iosDialog2 .weui-dialog__bd').html(s);
}
window.alert = function(s){sAlert(s);}

window.my = new Object();//存放用户的定位信息
window.in = new Array();//存放所有商户的定位信息
var mapObj,geolocation,dragTime;


//初始化地图
mapObj = new AMap.Map('container',{
    resizeEnable: true,
    zoom: 8,
    //zoomEnable: false,	//禁止放大缩小
    //dragEnable: false,	//禁止拖动
    mapStyle:'fresh'
});

$(function(){
    $('#loadingToast').fadeIn();
    //监控用户位置
    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 30000,          //超过30秒后停止定位，默认：无穷大
            maximumAge: 0,           //定位结果缓存0毫秒，默认：0
            convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true,        //显示定位按钮，默认：true
            buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10,10),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy:true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            extensions:'base'
        });
        //markerOptions: window.my_dingdan,
        mapObj.addControl(geolocation);//开始监控
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息//onComplete
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        $(".amap-geo").trigger("click");
    });
});

//处理定位信息
function onComplete(data){
    $('#loadingToast').fadeOut();
    if(data.info=="SUCCESS"){
        window.my = data;
        var tmpAddress = window.my.formattedAddress.split(window.my.addressComponent.township)[1];
        $('.Messp p span').text(tmpAddress+'附近');
        getData(window.my.position.lng,window.my.position.lat);
    }else{
        onError();
    }
}
//处理定位出错信息
function onError(e){
    $('#loadingToast').fadeOut();
    $('.Messp p span').text('(无法获取您的位置,请重新访问)');
}

//获取商家数据
function getData(lng,lat){

    //设为中心点
    //mapObj.setCenter([lng,lat]);

    $('#loadingToast').fadeIn();
    $('#loadingToast .weui-toast__content').html('正在获取数据<br>请稍等...');
    $.ajax({
        type:"get",
        cache:false,
        dataType:"json",
        url:"{:url('index/get_data_list')}?lng="+lng+"&lat="+lat+"&zoom="+mapObj.getZoom(),
        error:function(s){
            $('#loadingToast').fadeOut();
            alert('网络异常');
        },
        success:function(d){
            $('#loadingToast').fadeOut();
            if(d.code!=200){
                alert(d.msg);
            }else{
                showData(d.data);
            }
        }
    });
}

function get_level_star(n){
    var n = parseInt(n);
    var tmpStar = '';
    if(!n){
        tmpStar = '<i></i><i></i><i></i><i></i><i></i>';
    }else if(n==1){
        tmpStar = '<i></i>';
    }else if(n==2){
        tmpStar = '<i></i><i></i>';
    }else if(n==3){
        tmpStar = '<i></i><i></i><i></i>';
    }else if(n==4){
        tmpStar = '<i></i><i></i><i></i><i></i>';
    }else if(n==5){
        tmpStar = '<i></i><i></i><i></i><i></i><i></i>';
    }
    return tmpStar;
}

function showData(d){
    window.in = d;
    var tmpStr = '';
    var tmpUrl = "{:url('index_repair_info')}";
    var tmpQuery = '';
    if(!d.length){
        $('.no_more').text('在您附近没有找到相关的数据');
    }else{
        for(i=0;i<d.length;i++){
            tmpQuery = 'id='+d[i].id+'&lat='+window.my.position.lat+'&lng='+window.my.position.lng;
            tmpStr += '<div class="weui-cell">' +
                    '<a class="weui-cell__hd" href="'+tmpUrl+'?'+tmpQuery+'"><img src="'+d[i].logo+'" onerror="this.onerror=null;this.src=\'/static/wechat/images/about_03.jpg\'" /></a>' +
                    '<a class="weui-cell__bd" href="'+tmpUrl+'?'+tmpQuery+'">' +
                    '<p>'+d[i].repair_name+'</p>' +
                    '<div class="Lsit_div">'+get_level_star(d[i].level_avg)+'</div>' +
                    '<span>'+(d[i].order_count?d[i].order_count:0)+'人已消费</span>' +
                    '</a>' +
                    '<div class="weui-cell__ft">距你约'+getFlatternDistance(window.my.position.lat,window.my.position.lng,d[i].lat,d[i].lon).toFixed(0)+'m</div>' +
                '</div>';
        }
        $('#s_list_box').html(tmpStr);
    }
}


var EARTH_RADIUS = 6378137.0;    //单位M
var PI = Math.PI;
function getRad(d){return d*PI/180.0;}
function getFlatternDistance(lat1,lng1,lat2,lng2){
    var f = getRad((lat1 + lat2)/2);
    var g = getRad((lat1 - lat2)/2);
    var l = getRad((lng1 - lng2)/2);
    var sg = Math.sin(g);
    var sl = Math.sin(l);
    var sf = Math.sin(f);
    var s,c,w,r,d,h1,h2;
    var a = EARTH_RADIUS;
    var fl = 1/298.257;
    sg = sg*sg;
    sl = sl*sl;
    sf = sf*sf;
    s = sg*(1-sl) + (1-sf)*sl;
    c = (1-sg)*(1-sl) + sf*sl;
    w = Math.atan(Math.sqrt(s/c));
    r = Math.sqrt(s*c)/w;
    d = 2*w*a;
    h1 = (3*r -1)/2/c;
    h2 = (3*r +1)/2/s;
    var tmpReturn = d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
    return (tmpReturn?tmpReturn:0);
}


//点击个人中心
$(".heade_por").click(function(){
    window.location.href = '{:url("member/index")}';
});

//重新定位
$('.Messp p .icon_2').click(function(){
    $(".amap-geo").trigger("click");
});

</script>
{/block}

